<template>
  <div class="custom_page">
    <el-card>
      <div class="cardList">
        <div v-for="(item, index) in cardList" :key="index" class="cardItem">
          <div class="cardDetail">
            <div class="cardMoney">
              <span>{{ item.money }}</span>
              <span class="unit">{{ item.unit }}</span>
            </div>
            <div class="cardText">
              <span>{{ item.name }}</span>
              <!-- <img src="../../../assets/images/shuoming.png" /> -->
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="content">
      <!-- 顶部搜索 -->
      <div class="toolbar formSearch">
        <!-- 顶部搜索 -->
        <el-form :inline="true" :model="formInline">
          <el-form-item label="商家名称">
            <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入商家名称" />
          </el-form-item>
          <el-form-item label="商家编码">
            <el-input v-model="formInline.shopCode" maxlength="20" placeholder="请输入商家编码" />
          </el-form-item>
          <el-form-item label-width="0">
            <el-button type="primary" plain @click="search">查询 </el-button>
            <el-button plain @click="clear">重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--  表格 -->
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        style="width: 100%"
        class="dataTable"
      >
        <el-table-column prop="shopId" label="商家ID" />
        <el-table-column prop="shopName" label="商家名称" />
        <el-table-column prop="shopCode" label="商家编码" />
        <el-table-column prop="recharge" label="今日红包充值总额" />
        <el-table-column prop="realTimeAccount" label="红包实时到账总额" />
        <el-table-column prop="nextDayAccount" label="红包次日到账总额" />
        <el-table-column prop="grantAccount" label="红包发放总额" />
        <el-table-column prop="yesterdayTraffic" label="昨日流量消耗(GB)" />
        <el-table-column prop="haveWithdrawable" label="已提金额" />
        <el-table-column prop="ransferAccounts" label="转账金额" />
      </el-table>
      <el-pagination
        v-model:current-page="formInline.page"
        v-model:page-size="formInline.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        style="margin: 20px 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
// import { getShopId } from '@/utils/auth'
import { postFinanceGetNewAllFinance } from '@/api/overview'
import { onMounted, ref } from 'vue'

const cardList = ref([
  {
    name: '今日红包充值总额',
    money: '0.00',
    field: 'recharge',
    title: '',
    unit: '元'
  },
  {
    name: '红包实时到账总额',
    money: '0.00',
    field: 'realTimeAccount',
    title: '',
    unit: '元'
  },
  {
    name: '红包次日到账总额',
    money: '0.00',
    field: 'nextDayAccount',
    title: '',
    unit: '元'
  },
  {
    name: '红包发放总额',
    money: '0.00',
    field: 'grantAccount',
    title: '',
    unit: '元'
  },
  {
    name: '昨日流量消耗',
    money: '0.00',
    field: 'yesterdayTraffic',
    title: '',
    unit: 'GB'
  },
  {
    name: '已提金额',
    money: '0.00',
    field: 'haveWithdrawable',
    title: '',
    unit: '元'
  },
  {
    name: '转账金额',
    money: '0.00',
    field: 'ransferAccounts',
    title: '',
    unit: '元'
  }
])
const tableLoading = ref(false)
const formInline = ref({
  shopName: '', // 商家名称
  shopCode: '', // 商家编码
  page: 1,
  pageSize: 10
})
const total = ref(1)
const tableData = ref([])
onMounted(() => {
  getAll(formInline.value)
})
function handleSizeChange(val) {
  formInline.value.pageSize = val
  getAll(formInline.value)
}

function handleCurrentChange(val) {
  formInline.value.page = val
  getAll(formInline.value)
}
// 查询
function search() {
  total.value = 1
  formInline.value.page = 1
  getAll(formInline.value)
}
// 清除
function clear() {
  formInline.value = {
    shopName: '', // 商家名称
    shopCode: '', // 商家编码
    page: 1,
    pageSize: 10
  }
  getAll(formInline.value)
}
function getTopList(o) {
  cardList.value.map((item) => {
    item.money = o[item.field]
  })
}
// 初始化查询所有数据
function getAll(formInline) {
  tableLoading.value = true
  postFinanceGetNewAllFinance(formInline)
    .then((res) => {
      tableData.value = res.data.page.list
      total.value = res.data.page.total
      getTopList(res.data)
    })
    .finally(() => {
      tableLoading.value = false
    })
}
</script>

<style lang="scss" scoped>
.custom_page {
  .el-card {
    margin: 20px;
  }
  .content {
    padding: 20px;
    background-color: #ffffff;
  }
}

.cardList {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .cardItem {
    padding: 10px;
  }

  .cardDetail {
    .cardMoney {
      font-size: 34px;
      font-weight: bold;
      color: #ffae11;
      margin-bottom: 20px;
      text-align: center;
    }

    .unit {
      font-size: 1rem;
      font-weight: normal;
    }

    .cardText {
      font-size: 17px;
      display: flex;
      color: #333333;
      width: 4.6em;
      height: 2.4em;
      line-height: 1.2;
      .img {
        width: 20px;
        height: 20px;
        margin-left: 5px;
      }
    }
  }
}
</style>
